<script setup lang="ts">
// 使用路由
const route = useRoute();
// 路由参数保险获取
let key = route.params.key;
if (key === undefined) {
    if (process.client) {
        const url = window.location.href;
        const urlInfo = [...url.split('/')]
        key = urlInfo[urlInfo.length - 1]

    }
}

// 主题文字大小
const contentFontSize = ref('16px');

// 文字评论内容
const contentCommentText = ref("");

// 站点基础信息
const settingInfo = ref({});

// 自定义样式字体选择选项
const fontSizeSelectOption = [
    {
        content: '超大',
        value: '20px'
    },
    {
        content: '大',
        value: '18px'
    },
    {
        content: '标准',
        value: '16px'
    },
    {
        content: '小',
        value: '12px'
    }
];

// 选择确定选择字体
const onClickFontSizeSelectHandle = (row) => {
    contentFontSize.value = row.value
}

// 文章底部喜欢图标点击事件
const onLikeContentBottomIconClickHandle = () => {
    alert('暂未开放')
}

// 获取站点基础信息
const { data: basicSetting } = await useFetch(`${baseUrl}/setting/query/basic`)
settingInfo.value = JSON.parse(basicSetting.value.data.content);
// 获取主题详情
const { data: contentDetail } = await useFetch(`${baseUrl}/content/detail/${key}`);


</script>
<template>
    <div class="topic-detail-container">
        <!-- SEO信息 -->

        <Head>
            <Title>{{ contentDetail.data.title }} - {{ settingInfo.title }}</Title>
            <Meta name="description" :content="contentDetail.data.description" />
        </Head>

        <NuxtLayout name="topic-content">
            <template #detail>
                <t-card :bordered="false" class="topic-container shadow-xl">

                    <div class="content-container">
                        <h1 class="title text-[32px] font-[700] leading-[42px]">{{ contentDetail.data.title }}</h1>
                        <div class="content-info justify-between flex my-[48px]">
                            <div class="author-time flex flex-col text-[#999999] text-[12px]">
                                <div class="author">{{ contentDetail.data.user[0].username }}</div>
                                <div class="time">{{ contentDetail.data.created_at }}</div>
                            </div>
                            <div class="custom-style">
                                <t-dropdown :options="fontSizeSelectOption" trigger="hover"
                                    @click="onClickFontSizeSelectHandle">
                                    <t-space>
                                        <t-button variant="text">
                                            字号
                                            <template #suffix> <t-icon name="chevron-down" size="16" /></template>
                                        </t-button>
                                    </t-space>
                                </t-dropdown>
                            </div>
                        </div>
                        <div class="content-body leading-[30px]" :style="`font-size:${contentFontSize}`">
                            <div class="content" v-html="contentDetail.data.content_detail[0].content"></div>
                        </div>
                        <div class="content-action flex justify-between my-[48px]">
                            <div class="icons ">
                                <span class="like cursor-pointer" @click="onLikeContentBottomIconClickHandle">
                                    <t-icon name="thumb-up-2" size="large" /> {{ contentDetail.data.like }}
                                </span>
                            </div>
                        </div>
                        <div class="comment-container">
                            <div class="comment-label text-[16px] font-[700]">评论 <span
                                    class="comment-num ml-[9px]">(0)</span></div>
                            <div class="comment-input-box my-[30px]">
                                <t-row>
                                    <t-col :span="2">
                                        <div class="avatar">
                                            <t-avatar class=" my-0 mx-auto" size="50px"
                                                image="https://tdesign.gtimg.com/site/avatar.jpg" />
                                        </div>
                                    </t-col>
                                    <t-col :span="10">
                                        <div class="comment-input-area">
                                            <t-textarea v-model="contentCommentText" tips="文明评论，理性上网"
                                                :autosize="{ minRows: 5, maxRows: 5 }" placeholder="在这里输入你的独特见解吧"
                                                :maxlength="120"></t-textarea>
                                        </div>
                                        <div class="send-comment-button flex justify-end">
                                            <t-button theme="primary">

                                                <template #icon><t-icon name="send" /></template>
                                                发布评论
                                            </t-button>
                                        </div>
                                    </t-col>
                                </t-row>
                            </div>
                        </div>
                    </div>
                </t-card>
            </template>
            <template #side>
                <tile-new-publish></tile-new-publish>
                <tile-previous></tile-previous>
                <tile-recommend></tile-recommend>
            </template>
        </NuxtLayout>
    </div>
</template>
<style scoped></style>